<template>
    <div class="app-container">
   <!-- 拓展服务 -->
   <div class='search-bar'>
     <el-form :label-width="labelWidth" :model="searchModel" :inline="true">
       <span>版本号：</span>
       <el-input style="width:2.2rem" v-model="searchModel.userName" placeholder=""></el-input>
       <span class='move-right'>系统名称：</span>
       <el-form-item label="" prop="selectType">
          <el-select v-model="searchModel.selectType" systemName="" style="width: 160px" @change="$forceUpdate()">
            <el-option v-for="item in systemName" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <span class='move-right'>启用状态：</span>
       <el-form-item label="" prop="selectType">
          <el-select v-model="searchModel.selectType" placeholder="" style="width: 160px" @change="$forceUpdate()">
            <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
       <el-button class="move-right" type="primary" @click="handleDownload">查询
       </el-button>
       <el-button style="margin-left:20px" @click="handleDownload">重置
       </el-button>
     </el-form>
     <el-button style="margin-top:20px;" @click="handleDownload">新增
     </el-button>
     <el-table style="margin-top:20px;" v-loading='listLoading' :data='list' element-loading-text='Loading' border fit highlight-current-row>
       <el-table-column align='center' label='序号' width='80'>
         <template slot-scope='scope'>
           {{ scope.$index }}
         </template>
       </el-table-column>
       <el-table-column label='账号' width='120' align='center'>
         <template slot-scope='scope'>
           <span>{{ scope.row.menj }}</span>
         </template>
       </el-table-column>
       <el-table-column label='姓名' width='240' align='center'>
         <template slot-scope='scope'>
           <span>{{ scope.row.bianh }}</span>
         </template>
       </el-table-column>
       <el-table-column label='电话' width='150' align='center'>
         <template slot-scope='scope'>
           {{ scope.row.fangx }}
         </template>
       </el-table-column>
       <el-table-column class-name='status-col' label='状态' width='110' align='center'>
         <template slot-scope='scope'>
           <el-tag>{{ scope.row.status ? "启用" : "禁用" }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column align='center' prop='created_at2' label='操作' width='360'>
         <template slot-scope='scope'>
           <el-button size='mini' @click='handleEdit(scope.$index, scope.row)'>编辑</el-button>
           <el-button size='mini' type='danger' @click='handleDelete(scope.$index, scope.row)'>删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <div class="block" style="margin-top:15px;">
       <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
         :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize"
         layout=" prev, pager, next, jumper" :total="50">
       </el-pagination>
     </div>
   </div>
 </div>
 </template>
   
 <script>
 // import { getList } from '@/api/table'
 
 export default {
   data() {
     return {
       listLoading: false,
       //获取输入的查询条件
       searchModel: {
         input: '',
         searchModel: '',
       },
       //获取新增的信息
       inputModel: {
         serviceName: '',
         codeName: '',
         urlName: '',
         checked: true,
         radio: '1',
       },
       //控制弹出层
       dialogFormVisible: false,
       labelWidth: "90px",
       labelHeight: "32px",
       tableData: [],
       count: 0,
       currentPage: 1,
       total: 20,
       pageSize: 5,
       systemName: [
         {
           value: 0,
           label: '请选择'
         }, {
           value: 1,
           label: '地磅中控'
         }, {
           value: 2,
           label: '地磅终端'
         },
       ],
       //状态
       types: [
         {
           value: 0,
           label: '请选择'
         }, {
           value: 1,
           label: '启用'
         }, {
           value: 2,
           label: '禁用'
         },
       ],
       rules: {
         serviceName: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
         codeName: [{ required: true, message: '请输入CODE', trigger: 'blur' }],
         urlName: [{ required: true, message: '请输入URL', trigger: 'blur' }],
         radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
       },
       list: [{
         menj: '东1号门',
         bianh: '12345',
         fangx: '进场',
         tuoz: '收费进出场',
         status: 1,
         cjsj: '2015-10-28 08:50:08',
         cjz: '管理员'
       }, {
         menj: '东2号门',
         bianh: '12343',
         fangx: '出场',
         tuoz: '收费进出场',
         status: 1,
         cjsj: '2015-10-28 08:50:08',
         cjz: '管理员'
       }, {
         menj: '西1号门',
         bianh: '43215',
         fangx: '双向',
         tuoz: '收费进出场',
         status: 1,
         cjsj: '2015-10-28 08:50:08',
         cjz: '管理员'
       }, {
         menj: '西2号门',
         bianh: '12345',
         fangx: '出场',
         tuoz: '无',
         status: 1,
         cjsj: '2015-10-28 08:50:08',
         cjz: '管理员'
       }, {
         menj: '停车场1号门',
         bianh: '13333',
         fangx: '出场',
         tuoz: '无',
         status: 0,
         cjsj: '2015-10-28 08:50:08',
         cjz: '管理员'
       }],
     }
   },
   created() {
   },
   methods: {
     // getList() {
     //   this.tableData = list.map((item, i) => {
     //     item.menj = item.menj
     //     item.bianh = item.bianh
     //     item.fangx = item.fangx
     //     item.tuoz = item.tuoz
     //     item.status = item.status
     //     item.cjsj = item.cjsj
     //     item.cjz = item.cjz
     //     return item
     //   })
     //   this.count = 1;
     // },
     handleSizeChange(v) {
       // this.pageSize = v;
       // this.currentPage = 1;
       // this.getList();
     },
     handleCurrentChange(v) {
       // this.currentPage = v;
       // this.getList();
     },
     handleDownload() {
       this.dialogFormVisible = true;
 
     }, dialogDetermine() {
 
     }
   }
 }
 </script>
   
 <style lang="scss" scoped>
 .main {
   margin: 0.2rem;
   padding: 0.2rem;
 }
 
 .search-bar {
   margin-bottom: .2rem;
   text-align: left;
   float: left;
   margin-left: 10%;
   margin-top: .9rem;
 }
 
 .block {
   margin-right: .2rem;
   float: right;
 }
 
 .input-width {
   width: 404px;
 }
 
 .move-right {
   margin-left: .5rem;
 }
 </style>
   